<template>
	<view>
		<view class="seg-box flex-start">
			<view
				class="flex-1 tc c6"
				v-for="(item, index) in segmentedList"
				:key="item.value"
				:class="[
					activeSegmented === item.value ? 'active' : '',
					index == 0 ? 'activeSegmentedFrist' : 'activeSegmented',
					index + 1 == segmentedList.length
						? 'activeSegmentedEnd'
						: 'activeSegmented',
				]"
				@tap="clickItem(item)"
				>{{ item.text }}</view
			>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		segmentedList: {
			type: Array,
			value: [],
			default: () => [],
		},
		activeSegmented: {
			type: [String, Number],
			value: '',
		},
	},
	data() {
		return {}
	},
	methods: {
		clickItem(row) {
			this.$emit('clickItem', row.value)
		},
	},
}
</script>
<style lang="scss" scoped>
.seg-box {
	border: 2rpx solid #3a9bff;
	border-radius: 50rpx;
	height: 70rpx;
	line-height: 70rpx;
	border-right: none;
}
.active {
	background: #3a9bff;
	color: #fff;
}
.activeSegmented {
	border-right: 1rpx solid #3a9bff;
}
.activeSegmentedFrist {
	border-radius: 50rpx 0 0 50rpx;
}
.activeSegmentedEnd {
	border-radius: 0 50rpx 50rpx 0;
}
</style>
